<template>
    <div class="badge">
        <img :src="require('../assets/customer/customer-' + id + '.png')"/>
    </div>
</template>

<script>
export default {
  name: 'Badge',
  props:['id']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .badge{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 12px solid #fff;
        border-radius: 100%;
        background-color: #ff9122;
    }

    .badge img{
        width: 160px;
        height: 160px;
    }
</style>
